<template>
    <!-- 理财 -->
    <div class="madp-financial-detail wrap">
        <div class="card">
            <div class="ProductName"><span v-if="prodInfo.taCode == 'Y5'">(代销)</span>{{ this.prodInfo.name }}</div>
            <div class="mr8">
                <div class="gray bold">
                    {{ this.prodInfo.code }} |
                    {{ this.prodInfo.debtRegistCode }}
                </div>
            </div>
            <div class="tip_wrap flex1">
                <div class="tip">
                    {{
                        this.prodInfo.riskLevel == '0'
                            ? '未评定'
                            : this.prodInfo.riskLevel == '1'
                            ? '低风险'
                            : this.prodInfo.riskLevel == '2'
                            ? '中低风险'
                            : this.prodInfo.riskLevel == '3'
                            ? '中风险'
                            : this.prodInfo.riskLevel == '4'
                            ? '中高风险'
                            : '高风险'
                    }}
                </div>
                <div class="tip" v-if="this.prodInfo.pFirstAmt !== '0'">{{ prodInfo.taCode == 'Y5' ? prodInfo.pFirstAmt + '元' : this.prodInfo.pFirstAmt / 10000 + '万元' }}起购</div>
                <div class="tip" v-if="this.prodInfo.pAppAmt !== '0'">递增金额 {{ this.prodInfo.pAppAmt }}元整数倍</div>

                <div class="tip" v-if="this.prodInfo.pMaxAmt !== '0'">购买上限 {{ this.prodInfo.pMaxAmt / 10000 }}万元</div>
                <div class="tip" v-if="prodInfo.taCode == 'Y5'">管理人:{{ prodInfo.taName }}</div>
            </div>

            <div class="flex" style="margin-top: 16px">
                <div class="rate_wrap" v-if="prodInfo.reserve1 != '1309'">
                    <div class="rate red">{{ prodInfo.prdStatus == '1' ? '新品首发' : prodInfo.benchValue ? format_money_decimal(prodInfo.benchValue) : '--' }}</div>
                    <div class="gray small">{{ prodInfo.prdStatus == '1' ? '' : prodInfo.showBenchType | benchType }}</div>
                </div>
                <!-- 七日年化收益率 -->
                <div class="rate_wrap" v-else-if="this.prodInfo.profolioType == '1' && this.prodInfo.prdStatus != '1'">
                    <div
                        class="rate red"
                        :class="{
                            red: this.prodInfo.yield > 0,
                            green: this.prodInfo.yield < 0
                        }"
                    >
                        {{ parseDeletePer(format_money_decimal(this.prodInfo.yield)) }}
                        <span class="ft20">%</span>
                    </div>
                    <div class="gray small flex" style="justify-content: left">
                        <div>七日年化收益率</div>
                        <div class="yiwen_title" @click="viewRateDetail">
                            <img src="@/assets/img/financialShop/yiwen.png" class="yiwen_img" />
                            <!-- 气泡 -->
                            <div v-if="showYiwen" class="yiwen_popover">
                                <div class="yiwen_triangle"></div>
                                <div class="yiwen_content">根据产品过去七天的年化收益率加总平均所得，如产品成立未满七天则不显示。</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 业绩比较基准 -->
                <div class="rate_wrap" v-else-if="this.prodInfo.profolioType == '0' || (this.prodInfo.profolioType == '1' && this.prodInfo.prdStatus == '1')">
                    <div
                        class="rate red"
                        :class="{
                            red: this.prodInfo.planVolRate > 0,
                            green: this.prodInfo.planVolRate < 0,
                            rates: this.prodInfo.planVolRate && this.prodInfo.planVolRate.indexOf('-') != -1
                        }"
                    >
                        {{ prodInfo.planVolRate ? parseDeletePer(prodInfo.planVolRate) : '--' }}
                        <span class="ft20" v-if="prodInfo.reserve1 == '1309' && prodInfo.planVolRate && prodInfo.planVolRate.charAt(prodInfo.planVolRate.length - 1) == '%'">%</span>
                    </div>
                    <div class="flex" style="justify-content: flex-start; align-items: center" v-if="prodInfo.reserve1 == '1309'">
                        <div class="gray small">业绩比较基准</div>
                        <div class="yiwen_title" @click="viewYejiDetail">
                            <img src="@/assets/img/financialShop/yiwen.png" class="yiwen_img" />
                            <!-- 气泡 -->
                            <div v-if="showYeji" class="yiwen_popover">
                                <div class="yiwen_triangle"></div>
                                <div class="yiwen_content">
                                    业绩比较基准根据产品说明书约定投资范围内各类资产的收益率水平、投资比例、市场情况进行静态测算和情景分析，按照投资者持有份额满一年的情况测算得出。业绩比较基准不代表本理财产品的未来表现和实际收益，也不代表管理人对本理财产品进行的收益承诺。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 业绩比较基准/净值 -->
                <div class="rate_wrap" v-else-if="this.prodInfo.prdTemplateCode == '1301'">
                    <div
                        class="rate red"
                        :class="{
                            red: this.prodInfo.planVolRate / this.prodInfo.nav > 0,
                            green: this.prodInfo.planVolRate / this.prodInfo.nav < 0
                        }"
                    >
                        {{ this.prodInfo.planVolRate / this.prodInfo.nav }}
                    </div>
                    <div class="gray small">业绩比较基准/净值</div>
                </div>
                <!-- 每万份收益 -->
                <div class="rate_wrap" v-else-if="this.prodInfo.prdTemplateCode == '1309'">
                    <div class="rate red" :class="{ red: this.prodInfo.incomeUnit > 0, green: this.prodInfo.incomeUnit < 0 }">
                        {{ this.prodInfo.incomeUnit }}
                    </div>
                    <div class="gray small">
                        每万份收益
                        <img src="@/assets/img/financialShop/yiwen.png" alt="" width="14px" height="14px" />
                    </div>
                </div>
                <!-- 投资期限 -->
                <div :class="[this.prodInfo.planVolRate && this.prodInfo.planVolRate.indexOf('-') != -1 ? '' : 'date_wrap']">
                    <div class="big" v-if="prodInfo.taCode == 'Y5' && prodInfo.reserve1 != '1309'">{{ prodInfo.openCycle ? prodInfo.openCycle : '--' }}</div>

                    <div v-if="this.prodInfo.prdTemplate == 1">
                        <div class="big" v-if="this.prodInfo.reserve1 == '1700'">灵活申赎</div>
                        <div class="big" v-if="this.prodInfo.reserve1 == '1309'">灵活申赎</div>
                    </div>
                    <div class="big" v-if="this.prodInfo.reserve1 == '1301' && prodInfo.cycleDays">每{{ prodInfo.cycleDays }}天开放</div>
                    <div class="big" v-if="this.prodInfo.reserve1 == '1401'">每月开放</div>
                    <div class="big" v-if="this.prodInfo.prdTemplate != '1' && this.prodInfo.prdTemplate != '2'">产品期限{{ this.prodInfo.productDate }}天</div>

                    <div class="gray small" v-if="this.prodInfo.reserve1 == '1301' ? (prodInfo.cycleDays ? true : false) : true">投资期限</div>
                </div>
            </div>
            <!-- 业绩比较基准 -->
            <div class="product_baseline" v-if="prodInfo.reserve1 != '1309'">
                <p>业绩比较基准：{{ prodInfo.planVolRate }}</p>
                <!-- 业绩比较基准测算依据 -->
                <p>{{ prodInfo.benchExplainDetail }}</p>
            </div>
        </div>
        <!-- 产品周期 -->
        <div class="pd20 white mrt10" v-if="this.prodInfo.prdTemplate !== '1'">
            <div class="column_title lh40">产品周期</div>
            <!-- 封闭式 -->
            <div v-if="this.prodInfo.prdTemplate === '0'">
                <div class="circle-wrap">
                    <div class="flex">
                        <div class="circle"></div>
                        <div class="red-line"></div>
                        <div class="circle"></div>
                        <div class="red-line"></div>
                        <div class="circle"></div>
                        <div class="red-line"></div>
                        <div class="circle"></div>
                    </div>
                    <div class="flex" style="width: 100%">
                        <div class="darkgray">起售</div>
                        <div class="darkgray">截止</div>
                        <div class="darkgray">份额确认</div>
                        <div class="darkgray">到期</div>
                    </div>
                    <div class="flex" style="width: 100%">
                        <div class="gray wd25 left">
                            {{ this.prodInfo.raiseDateS ? format_date({ date: this.prodInfo.raiseDateS }) : '' }}
                        </div>
                        <div class="gray wd25">
                            {{ format_date({ date: this.prodInfo.raiseDateE }) }}
                        </div>
                        <div class="gray wd25">
                            {{ format_date({ date: this.prodInfo.investDateS }) }}
                        </div>
                        <div class="gray wd25 right">
                            {{ format_date({ date: this.prodInfo.investDateE }) }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 定开式 -->
            <div v-if="this.prodInfo.prdTemplate === '2'">
                <div class="circle-wrap">
                    <div class="flex">
                        <div class="circle"></div>
                        <div class="red-line"></div>
                        <div class="circle"></div>
                        <div class="red-line"></div>
                        <div class="circle"></div>
                        <div class="red-line"></div>
                        <div class="circle"></div>
                        <!-- <div class="red-line"></div>
                <div class="circle"></div> -->
                    </div>
                    <!--尚未成立的定开式理财的产品周期(募集期)  -->
                    <div class="flex" style="width: 100%" v-if="this.prodInfo.prdStatus === '1'">
                        <div class="darkgray wd25 left">募集起始日</div>
                        <div class="darkgray wd25">募集结束日</div>
                        <div class="darkgray wd25">产品成立日</div>
                        <div class="darkgray wd25 right">下一开放日</div>
                        <!-- <div class="darkgray">到期</div> -->
                    </div>

                    <div class="flex" style="width: 100%" v-else>
                        <div class="darkgray">起售</div>
                        <div class="darkgray" :style="`margin-left: ${21 / 37.5}rem`">截止（开放日）</div>
                        <div class="darkgray" :style="`margin-left: -${5 / 37.5}rem`">份额确认</div>
                        <div class="darkgray">下一开放日</div>
                        <!-- <div class="darkgray">到期</div> -->
                    </div>
                    <!--尚未成立的定开式理财的产品周期(募集期)-->
                    <div class="flex" style="width: 100%" v-if="this.prodInfo.prdStatus === '1'">
                        <div class="gray wd25 left">
                            {{
                                this.prodInfo.raiseDateS === '-'
                                    ? this.prodInfo.raiseDateS
                                    : format_date({
                                          date: this.prodInfo.raiseDateS
                                      })
                            }}
                        </div>
                        <div class="gray wd25">
                            {{
                                this.prodInfo.raiseDateE === '-'
                                    ? this.prodInfo.raiseDateE
                                    : format_date({
                                          date: this.prodInfo.raiseDateE
                                      })
                            }}
                        </div>
                        <div class="gray wd25">
                            {{
                                this.prodInfo.investDateS
                                    ? format_date({
                                          date: this.prodInfo.investDateS
                                      })
                                    : '-'
                            }}
                        </div>
                        <div class="gray wd25 right">
                            {{
                                this.prodInfo.cycleAppayDateS
                                    ? format_date({
                                          date: this.prodInfo.cycleAppayDateS
                                      })
                                    : '-'
                            }}
                        </div>
                    </div>
                    <!-- 除了募集期之外的情况(status!=='1') -->
                    <div class="flex" style="width: 100%" v-else>
                        <div class="gray wd25 left">
                            {{
                                this.prodInfo.cycleAppayDateS === '-'
                                    ? this.prodInfo.cycleAppayDateS
                                    : format_date({
                                          date: this.prodInfo.cycleAppayDateS,
                                          day: -6
                                      })
                            }}
                        </div>
                        <div class="gray wd25">
                            {{
                                this.prodInfo.cycleAppayDateS === '-'
                                    ? this.prodInfo.cycleAppayDateS
                                    : format_date({
                                          date: this.prodInfo.cycleAppayDateS
                                      })
                            }}
                        </div>
                        <div class="gray wd25">
                            {{
                                this.prodInfo.lastLiquidationDate
                                    ? format_date({
                                          date: this.prodInfo.lastLiquidationDate
                                      })
                                    : '-'
                            }}
                        </div>
                        <div class="gray wd25 right">
                            {{
                                this.prodInfo.nextCycleOpenday
                                    ? format_date({
                                          date: this.prodInfo.nextCycleOpenday
                                      })
                                    : '-'
                            }}
                        </div>
                        <!-- <div class="gray">{{ this.prodInfo.investDateE }}</div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 交易规则 只有开放式才有交易规则 -->
        <div
            class="rule_wrap white"
            v-if="
                (prodInfo.taCode == 'Y5' && prodInfo.code == 'Z11001') || prodInfo.code == 'Z11005' || prodInfo.code == 'Z11009' || this.prodInfo.reserve1 == '1700' || this.prodInfo.reserve1 == '1309'
            "
        >
            <div class="flex">
                <div class="column_title">交易规则</div>
            </div>
            <div v-if="prodInfo.taCode == 'Y5' && prodInfo.code == 'Z11001'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">
                        按周开放申购，开放期起始日9:00至开放期结束日17:00间可提交购买申请，开放期结束日17:00前可撤销，未撤销申请于每周三确认并开始运作，如遇节假日具体认申购开放期和运作起始日以公告为准。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">每笔持有份额运作满91天全额自动赎回，如遇节假日顺延。赎回金额将于自动赎回日后5个工作日内到账。</div>
                </div>
                <div class="rule_item flex">
                    <div class="right darkgray">更多详情请阅读产品说明书。</div>
                </div>
            </div>

            <div v-if="prodInfo.taCode == 'Y5' && prodInfo.code == 'Z11005'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">
                        按周开放申购，开放期起始日9:00至开放期结束日17:00间可提交购买申请，开放期结束日17:00前可撤销，未撤销申请于每周四确认并开始运作，如遇节假日具体认申购开放期和运作起始日以公告为准。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">每笔持有份额运作满182天全额自动赎回，如遇节假日顺延。赎回金额将于自动赎回日后5个工作日内到账。</div>
                </div>
                <div class="rule_item flex">
                    <div class="right darkgray">更多详情请阅读产品说明书。</div>
                </div>
            </div>

            <div v-if="prodInfo.taCode == 'Y5' && prodInfo.code == 'Z11009'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">
                        按周开放申购，开放期起始日9:00至开放期结束日17:00间可提交购买申请，开放期结束日17:00前可撤销，未撤销申请于每周五确认并开始运作，如遇节假日具体认申购开放期和运作起始日以公告为准。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">每笔持有份额运作满364天全额自动赎回，如遇节假日顺延。赎回金额将于自动赎回日后5个工作日内到账。</div>
                </div>
                <div class="rule_item flex">
                    <div class="right darkgray">更多详情请阅读产品说明书。</div>
                </div>
            </div>

            <!-- 日日聚宝 -->
            <div v-else-if="prodInfo.taCode == 'Y5' && prodInfo.code == 'A22001'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">
                        开放日（T日）15:30前购买，T日17:30前可撤销，未撤销申请下一开放日（T+1日）确认份额并开始计算收益；开放日（T日）15：30后或非开放日购买，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认份额并开始计算收益。开放日为产品存续期间的每周一至周五，但不包括产品封闭期、国家法定节假日和南银理财公告暂停开放的日期。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">分红</div>
                    <div class="right darkgray">每日计算、按日分配。每日分红转份额，份额红利再投资。</div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">
                        开放日（T日）15：30前赎回本产品，T日17：30前可撤销，未撤销申请下一开放日（T+1日）确认；开放日（T日）15：30后或非开放日赎回，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认。赎回资金将于赎回确认日后3个工作日内到账。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="right darkgray">更多详情请阅读产品说明书。</div>
                </div>
            </div>
            <!-- 南银理财 -->
            <div v-else-if="prodInfo.taCode == 'Y5' && prodInfo.code != 'Z11001' && prodInfo.code != 'Z11005' && prodInfo.code != 'Z11009' && prodInfo.code != 'A22001'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">
                        产品开放日15:30前的申购于下一产品开放日确认，其他时间的申购于申购日后第二个产品开放日确认。开放日为产品存续期间的每周一至周五，但不包括产品封闭期、国家法定节假日和南银理财公告暂停开放的日期。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">分红</div>
                    <div class="right darkgray">每日计算、按日分配。每日分红转份额，份额红利再投资。</div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">产品开放日15:30前的赎回于下一产品开放日确认，其他时间的赎回于赎回日后第二个产品开放日确认。赎回资金将于赎回确认日后三个工作日内到账。</div>
                </div>
                <div class="rule_item flex">
                    <div class="right darkgray">详情请阅读产品说明书</div>
                </div>
            </div>

            <div v-else-if="this.prodInfo.reserve1 == '1700'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">开放日9:00—14：00购买，实时扣款，当日计息；其他时段购买，顺延至下一开放日受理、确认</div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">分红</div>
                    <div class="right darkgray">每月6日分红登记（逢节假日顺延），其后第1个开放日向投资者支付分红</div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">开放日9:00—14：00赎回，实时到账；其他时段赎回，顺延至下一开放日受理、确认。</div>
                </div>
            </div>
            <!-- 天天添利 -->
            <div v-else-if="prodInfo.reserve1 == '1309' && prodInfo.code == 'N0001'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">
                        开放日（T日）17：30前购买，T日17：30前可撤销，未撤销申请下一开放日（T+1日）确认份额并开始计算收益；开放日（T日）17：30后或非开放日购买，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认份额并开始计算收益。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">分红</div>
                    <div class="right darkgray">红利再投资，每日分配、按日支付。</div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">
                        支持快速赎回和普通赎回。快速赎回:当日到账（具体以实际到账时间为准），每个自然日10万元额度，不享受转出当日收益，快速赎回交易不可撤销。普通赎回：开放日（T日）17：30前赎回本产品，T日17：30前可撤销，未撤销申请下一开放日（T+1日）确认；开放日（T日）17：30后或非开放日赎回，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认。赎回确认后，最晚不超过2个工作日到账。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="right darkgray">更多详情请阅读产品说明书。</div>
                </div>
            </div>
            <!-- 天天添鑫 -->
            <div v-else-if="prodInfo.reserve1 == '1309' && prodInfo.code != 'N0001'">
                <div class="rule_item flex darkgray">
                    <div class="gray left">购买</div>
                    <div class="right darkgray">
                        开放日（T日）17：30前购买，T日17：30前可撤销，未撤销申请下一开放日（T+1日）确认份额并开始计算收益；开放日（T日）17：30后或非开放日购买，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认份额并开始计算收益。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">分红</div>
                    <div class="right darkgray">红利再投资，每日分配、按日支付。</div>
                </div>
                <div class="rule_item flex">
                    <div class="gray left">赎回</div>
                    <div class="right darkgray">
                        支持快速赎回和普通赎回。快速赎回:当日到账（具体以实际到账时间为准），每个自然日1万元额度，不享受转出当日收益，快速赎回交易不可撤销。普通赎回：开放日（T日）17：30前赎回本产品，T日17：30前可撤销，未撤销申请下一开放日（T+1日）确认；开放日（T日）17：30后或非开放日赎回，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认。赎回确认后，最晚不超过2个工作日到账。
                    </div>
                </div>
                <div class="rule_item flex">
                    <div class="right darkgray">更多详情请阅读产品说明书。</div>
                </div>
            </div>
        </div>
        <!-- 合同 -->
        <div class="contract flex lh50" @click="viewContract">
            <div class="column_title lh50">理财产品合同</div>
            <div class="lh50">
                <img src="@/assets/img/financialShop/right.png" alt="" width="15px" height="15px" />
            </div>
        </div>
        <!-- 温馨提示 -->
        <div class="warm_tip_wrap" v-if="prodInfo.code != 'A22001'">
            <div class="warm_tip darkgray bold" v-show="this.prodInfo.reserve1 == '1401' || this.prodInfo.reserve1 == '1301' || this.prodInfo.reserve1 == '1309' || this.prodInfo.reserve1 == '1700'">
                温馨提示
            </div>

            <!-- 代销南银定开温馨提示 -->
            <div v-if="prodInfo.taCode == 'Y5' && prodInfo.prdTemplate == '2'">
                <div class="warm_tip gray">1.开放期首日9：00-开放期末日17：00间可申购、赎回、撤单。</div>
                <div class="warm_tip gray">2.非开放期支持预约申购、预约赎回，开放期自动受理。</div>
                <div class="warm_tip gray">3.本产品支持全额赎回或部分赎回，未赎回份额自动滚投下一周期。</div>
            </div>
            <div v-else>
                <div>
                    <div class="warm_tip gray" v-if="this.prodInfo.reserve1 == '1309' || this.prodInfo.reserve1 == '1700'">1.开放日为工作日，不包括周末及法定节假日</div>
                </div>
                <div v-if="this.prodInfo.reserve1 == '1301'">
                    <div class="warm_tip gray">1.本产品购买交易时间为开放日的9:00-17:30，其他时间为预约交易</div>
                    <div class="warm_tip gray">2.如您在开放日之前提交购买申请，我们将预受理您的请求，并于开放日自动正式受理，清算日确认交易</div>
                    <div class="warm_tip gray">3.本产品支持预约赎回，可全额赎回或部分赎回（剩余份额须不低于最低持有份额）。赎回须在开放日17:30前办理，未赎回份额自动滚投下一周期。</div>
                </div>
                <div v-if="this.prodInfo.reserve1 == '1401'">
                    <div class="warm_tip gray">1.本产品购买交易时间为开放日的9:00-17:30，其他时间为预约交易</div>
                    <div class="warm_tip gray">2.如您在开放日之前提交购买申请，我们将预受理您的请求，并于开放日自动正式受理，清算日确认交易。</div>
                </div>
            </div>
        </div>
        <!-- 风险提示 -->
        <div class="warm_tiip_wrap">
            <div class="warm_tip darkgray bold">风险提示</div>
            <div>
                <div class="warm_tip bold">1.理财非存款，产品有风险，投资需谨慎</div>
                <div class="warm_tip bold">2.如有销售人员介入进行营销推介，请停止本自助终端购买操作，转至本行网点销售专区内购买</div>
                <div class="warm_tip">3.本产品为非保本浮动收益产品，不保证本金和收益，存续期内净值变化可能导致盈亏波动</div>
                <div class="warm_tip">4.理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资需谨慎</div>
                <div class="warm_tip">5.理财产品业绩比较基准不代表其未来表现和实际收益，也不代表管理人对其进行的收益承诺</div>
                <div class="warm_tip">6.购买前请您确认已充分了解产品相关特点、投资方向、风险收益等特征及相关产品协议</div>
                <div class="warm_tip" v-if="prodInfo.taCode == 'Y5'">7.本产品由南银理财有限责任公司发行和管理，华融湘江银行为代销机构，代销机构不承担产品的投资、兑付和风险管理责任</div>
            </div>
        </div>
        <share-btn :shareInfo="shareInfo" />
        <back-btn />
        <buy-btn :prodInfo="prodInfo" prodType="1" btnText="购买" />
    </div>
</template>
<script>
    import financialShopApi from '@/api/financial-shop';
    import { format_date, format_money_decimal, format_money_decimal_jingzhi, format_money_decimal_qiri, format_decimal, parseDeletePer } from '@/utils/financial-utils';
    import buyBtn from '@/components/buy-btn';
    import shareBtn from '@/components/share-btn';
    import backBtn from '@/components/back-btn.vue';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        name: 'madp-financial-detail',
        components: { buyBtn, shareBtn, backBtn },
        mixins: [mxInitWxConfig],
        data() {
            return {
                shareInfo: {},
                prodInfo: {},

                showYiwen: false,
                showYeji: false,
                form: {
                    title: '交易规则',
                    content: [
                        {
                            label: '购买',
                            content:
                                '开放日（T日）15:30前购买，T日17:30前可撤销，未撤销申请下一开放日（T+1日）确认份额并开始计算收益；开放日（T日）15：30后或非开放日购买，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认份额并开始计算收益。开放日为产品存续期间的每周一至周五，但不包括产品封闭期、国家法定节假日和南银理财公告暂停开放的日期。'
                        },
                        {
                            label: '分红',
                            content: '每日计算、按日分配。每日分红转份额，份额红利再投资。'
                        },
                        {
                            label: '赎回',
                            content:
                                '开放日（T日）15：30前赎回本产品，T日17：30前可撤销，未撤销申请下一开放日（T+1日）确认；开放日（T日）15：30后或非开放日赎回，下一开放日（T+1日）17:30前可撤销，未撤销申请T+2日确认。赎回资金将于赎回确认日后3个工作日内到账。'
                        }
                    ]
                },
                label: {}
            };
        },
        filters: {
            benchType(type) {
                switch (type) {
                    case '0':
                        return '近1月年化';
                    case '1':
                        return '近3月年化';
                    case '3':
                        return '近6月年化';
                    case '4':
                        return '近1年年化';
                    case '5':
                        return '成立以来年化';
                }
            }
        },
        watch: {
            wxUserId() {
                console.log('wxkkkkk', this.wxUserId);
                if (this.wxUserId) {
                    this.prodId = this.$route.query.id;
                    this.getProdInfo();
                }
            }
        },
        created() {},
        deactivated() {
            this.wxUserId = '';
        },
        activated() {
            this.label = {
                label: '理财产品合同',
                url: 'http://www.hrxjbank.com.cn/72/107/368/content_12266.html'
            };
            // this.prodId = this.$route.query.id
            // this.getProdInfo()

            // 气泡操作(点击除气以外的区域)
            const fn = (e) => {
                if (this.showYiwen) {
                    this.showYiwen = false;
                    e.stopPropagation();
                }
            };
            window.addEventListener('click', fn, true);
            this.$once('hook:beforeDestroy', () => {
                window.removeEventListener('click', fn);
            });

            // 气泡操作(点击除气以外的区域)
            const fn1 = (e) => {
                if (this.showYeji) {
                    this.showYeji = false;
                    e.stopPropagation();
                }
            };
            window.addEventListener('click', fn1, true);
            this.$once('hook:beforeDestroy', () => {
                window.removeEventListener('click', fn1);
            });
        },
        methods: {
            format_date,
            format_decimal,
            format_money_decimal,
            format_money_decimal_jingzhi,
            format_money_decimal_qiri,
            parseDeletePer,
            jump(url) {
                window.location.href = url;
            },
            viewContract() {
                //
            },
            // 查看七日年化小图标
            viewRateDetail() {
                this.showYiwen = !this.showYiwen;
            },
            // 查看业绩比较基准小图标
            viewYejiDetail() {
                this.showYeji = !this.showYeji;
            },
            getProdInfo() {
                financialShopApi
                    .getFinanceProductDetail({
                        id: this.prodId
                    })
                    .then((res) => {
                        this.prodInfo = res.data.data;
                        this.$forceUpdate();
                        var rate = '';
                        if (this.prodInfo.prdStatus != '1' && this.prodInfo.profolioType == '1') {
                            rate = this.parseDeletePer(this.format_money_decimal(this.prodInfo.yield)) + '%';
                        } else {
                            rate = this.parseDeletePer(this.format_money_decimal(this.prodInfo.planVolRate)) + '%';
                        }
                        this.shareInfo = {
                            title: name || '理财产品', // 分享标题
                            desc: '通过华融湘江银行手机银行，购买' + this.prodInfo.name + ',享' + rate + '收益', // 分享描述
                            link: this.$utils.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: `${this.$utils.apiUrl}/mfs/avatar.jpg`
                        };
                        this.$wxShare.setShareInfo(this.shareInfo);
                        let { code, name, reserve1, cycleDays, taCode, prdTemplate, productDate } = this.prodInfo;
                        // 判断投资期限
                        let buy_period = '';
                        if ((reserve1 == '1301' && cycleDays) || reserve1 != '1301') {
                            if (taCode == 'Y5') {
                                buy_period = String(taCode);
                            } else if (prdTemplate == '1' && ['1700', '1309'].includes(reserve1)) {
                                buy_period = '灵活申赎';
                            } else if (reserve1 == '1301' && cycleDays) {
                                buy_period = '每' + String(cycleDays) + '天开放';
                            } else if (reserve1 == '1401') {
                                buy_period = '每月开放';
                            } else if (!['1', '2'].includes(prdTemplate)) {
                                buy_period = String(productDate);
                            }
                        }
                        this.$sensorsSend('FinancialView', {
                            from_page_name: sessionStorage.getItem('from_page_name') || '',
                            recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                            financial_type: '理财',
                            financial_code: code,
                            financial_name: name,
                            buy_period
                        });
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-financial-detail {
        width: 100%;
        min-height: 100vh;
        // overflow-y: scroll;
        background-image: url('../../assets/img/financialShop/detailbg.png');
        background-position: 0% 0%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: rgb(239, 239, 239);
        padding-top: 20px;
        padding-bottom: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;
    }
    .wd25 {
        width: 25%;
        text-align: center;
    }
    .right {
        text-align: right;
    }
    .left {
        text-align: left;
    }
    .center {
        margin: auto;
    }
    .mrt10 {
        margin-top: 10px;
    }
    .detail_button {
        height: 100%;
        margin-top: 3px;
        width: 14px;
        height: 14px;
        margin-left: 5px;
        img {
            width: 100%;
        }
    }
    .wrap {
        font-size: 14px;
        .yiwen_title {
            width: 14px;
            height: 14px;
            margin-left: 2px;
            position: relative;
            // margin-top: 2px;
            .yiwen_img {
                width: 14px;
                height: 14px;
            }
        }
        .yiwen_popover {
            position: absolute;
            left: -60px;
            top: 0;
            z-index: 999;
            .yiwen_triangle {
                width: 0;
                height: 0;
                border-top: 15px solid transparent;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 15px solid rgb(57, 57, 60);
                margin-left: 58px;
            }
            .yiwen_content {
                width: 220px;
                background: rgb(57, 57, 60);
                border-radius: 4px;
                padding: 5px 10px;
                color: white;
                margin-top: -8px;
            }
        }

        .lh50 {
            height: 50px;
            line-height: 50px;
        }

        .warm_prompt {
            padding-top: 10px;
            .warm_prompt_title {
                font-size: 17px;
                font-weight: bold;
                line-height: 45px;
                color: #2c2c2c;
                text-align: center;
            }
            .warm_prompt_info {
                font-size: 16px;
                font-weight: 400;
                color: #000000;
                opacity: 0.8;
                padding: 5px 0 20px 0;
                line-height: 22px;
            }
            .warm_prompt_button {
                border-top: 1px solid #e6e6e6;
                height: 50px;
                line-height: 50px;
                font-size: 17px;
                font-weight: 500;
                color: #2c2c2c;
                text-align: center;
                width: 50%;
            }
            .warm_prompt_button1 {
                border-top: 1px solid #e6e6e6;
                height: 50px;
                line-height: 50px;
                font-size: 17px;
                font-weight: 600;
                color: #2c2c2c;
                text-align: center;
                width: 100%;
            }
        }
        .bottom {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            .calculator {
                position: fixed;
                left: 12px;
                bottom: 99px;
                img {
                    width: 58px;
                    height: 50px;
                }
            }
        }
        #myEcharts {
            width: 375px;
            height: 250px;
            margin-left: -20px;
        }
        .flex {
            display: flex;
            justify-content: space-between;
        }
        .flex1 {
            display: flex;
        }
        .flex2 {
            display: flex;
            justify-content: space-around;
        }
        .circle {
            width: 20px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #ed5555;
            margin: 10px auto;
            box-shadow: 0px 3px 6px rgba(237, 85, 85, 0.3);
        }

        .circle1 {
            width: 10px;
        }
        .red-line {
            width: 80%;
            color: #ed5555;
            background: #ed5555;
            height: 1px;
            margin: 15px 5px 5px 5px;
        }
        .gray {
            color: #90959a;
        }
        .darkgray {
            color: #2c2c2c;
        }
        .small {
            font-size: 12px;
        }
        .big {
            font-size: 20px;
            font-weight: bold;
        }
        .mr8 {
            margin: 8px 0;
        }
        .pd20 {
            padding: 20px;
        }
        .pd020 {
            padding: 0 20px;
        }
        .ft20 {
            font-size: 20px;
        }
        .red {
            color: #ed5555;
        }
        .green {
            color: #5ba764;
        }

        .lh40 {
            line-height: 40px;
        }
        .lh17 {
            line-height: 17px;
        }
        .bold {
            font-weight: bold;
        }
        .bold_little {
            font-weight: 500;
        }
        .white {
            background: white;
        }

        // 顶部card
        .up {
            width: 100%;
            height: 184px;
            // background-image: url("~img/moneyManagement/detailbg.png");
            // background-repeat: no-repeat;
            // background-size: 100% 100%;
            margin-top: -60px;
        }
        .card {
            width: 343px;
            padding: 16px;
            background: #fafafa;
            border-radius: 8px;
            box-shadow: 0 5px 10px rgba(211, 198, 182, 0.3);
            margin: 0 auto 20px;

            .ProductName {
                font-weight: bold;
                font-size: 16px;
                color: #2c2c2c;
            }
            .tip_wrap {
                flex-wrap: wrap;
                .tip {
                    color: #ff7d43;
                    border: 1px solid #ff7d43;
                    padding: 1px 4px;
                    border-radius: 4px;
                    font-size: 12px;
                    margin: 4px 0 0 3px;
                }
            }
            .rate_wrap {
                position: relative;
                .rate {
                    font-size: 32px;
                    font-weight: bold;
                }
                .rates {
                    font-size: 24px;
                    font-weight: bold;
                }
            }
            .date_wrap {
                padding-top: 11px;
            }

            .product_baseline {
                margin-top: 6px;
                padding: 4px 10px 4px 4px;
                background-color: rgb(239, 239, 239);
                font-size: 14px;
                color: gray;
                border-radius: 5px;
                p {
                    margin: 0;
                }
            }
        }
        // 每个栏目的标题
        .column_title {
            font-weight: bold;
            font-size: 16px;
        }
        // 产品特色
        .special_img_box {
            width: 100%;
            height: 278px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        // 合同
        .contract {
            padding: 0 20px;
            background: white;
            margin: 10px 0;
        }
        // 温馨提示
        .warm_tip_wrap {
            padding: 20px;
            margin-bottom: 0;
            .warm_tip {
                line-height: 25px;
                font-size: 12px;
                text-indent: -10px;
            }
        }
        .warm_tiip_wrap {
            padding: 20px;
            margin-bottom: 150px;
            .warm_tip {
                line-height: 25px;
                font-size: 15px;
                text-indent: -10px;
            }
        }
        // 图表
        .earchs_wrap {
            margin: 10px;
            padding: 20px;
        }
        // 净值
        .jingzhi_wrap {
            .jingzhibiao {
                .jingzhibiao_content {
                    padding: 5px 20px;
                }
                .view_jingzhi {
                    padding: 10px 0;
                    text-align: center;
                    color: #333;
                }
                .left {
                    width: 55%;
                }
                .right {
                    width: 45%;
                }
                .lh40 {
                    line-height: 40px;
                }

                .lh30 {
                    line-height: 30px;
                }
            }
        }
        .tab_bar {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            background: #fff;
            padding-bottom: 10px;
            .tab_bar_item {
                position: relative;
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 44px;
                font-size: 14px;
                font-weight: 500;
                line-height: 20px;
                color: #2c2c2c;
                font-weight: bold;
                opacity: 0.5;
                &.active {
                    opacity: 1;
                    &::after {
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        display: block;
                        content: '';
                        width: 24px;
                        height: 4px;
                        background: #ed5555;

                        border-radius: 2px;
                    }
                }
            }
        }
        // 图标容器
        .ads_img_box {
            width: 100%;
            height: 101px;
            img {
                width: 100%;
            }
        }
        .ft15 {
            font-size: 15px;
        }
        // 交易规则
        .rule_wrap {
            padding: 20px;
            width: 100%;
            font-size: 15px;
            .rule_item {
                padding: 20px 0;
                .left {
                    width: 20%;
                }
                .right {
                    width: 70%;
                    text-align: left;
                }
            }
        }
        // 底部按钮
        .button_wrap {
            font-size: 15px;
            .button_tip {
                font-size: 14px;
                color: #ed5555;
                line-height: 40px;
                text-align: center;
                background: rgb(255, 222, 222);
            }
            .button {
                width: 100%;
                line-height: 50px;
                background: #ed5555;
                color: white;
                text-align: center;
            }
        }
        .date_range {
            padding: 20px 16px 16px;
            background: #fff;
        }
        .btn_group {
            background: #fff;
            justify-content: space-around;
            padding: 0 16px 14px;
            margin-top: -10px;
        }
        .date {
            border-radius: 5px;
            font-size: 11px;
            color: #2c2c2c;
            opacity: 0.5;
            padding: 0 12px;
            height: 20px;
            line-height: 20px;
        }
        .orange {
            height: 20px;
            line-height: 20px;
            border-radius: 13px;
            color: #ff7d43;
            background: #fff2ec;
            opacity: 1;
        }
    }
</style>
